<template>
  <div class="bg-white pb-2">
    <strong class="d-block text-center pt-2">普通</strong>
    <div class="d-flex flex-wrap px-1">
      <div :style="{flexBasis: w}" class="rule"
           :class="{on: value.rule == r.rule && !value.bold}"
           :key="r.id" @click="select(r)" v-for="r in rules">
        <a>{{r.ruleName}}</a>
      </div>
    </div>

    <strong class="d-block text-center pt-2">胆拖</strong>
    <div class="d-flex flex-wrap px-1">
      <div :style="{flexBasis: w}" class="rule"
           :class="{on: value.rule == r.rule && value.bold}"
           :key="r.id + 'b'" @click="select(r, 1)" v-for="r in bolds">
        <a>{{r.ruleName}}</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['value', 'rules', 'size'],
  name: 'rules',
  methods: {
    on (rule, bold) {
      if (rule != this.rule) {
        return ''
      }
      return bold ? this.bold == bold ? 'on' : '' : ''
    },
    select (rule, bold) {
      var data = {
        rule: rule.rule,
        name: rule.ruleName,
        bold
      }
      this.$emit('input', data)
    }
  },
  computed: {
    // 普通/胆拖玩法分组
    bolds () { return this.rules.filter(r => r.bold) },
    w () { return 100 / this.size + '%' }
  }
}
</script>
